<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统权限配置</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .menu-item {
            transition: all 0.2s;
        }
        
        .menu-item:hover {
            background-color: #f9fafb;
        }
        
        .tree-toggle {
            transition: transform 0.2s;
        }
        
        .tree-toggle.open {
            transform: rotate(90deg);
        }

        .permission-tag {
            font-size: 0.7rem;
            padding: 0.1rem 0.4rem;
        }
        
        /* 添加模态框样式 */
        .modal {
            transition: opacity 0.3s ease;
        }
        
        .modal-content {
            max-height: 80vh;
            overflow-y: auto;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航 -->
    <div class="bg-white shadow-sm p-4">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center">
                <i class="fas fa-cogs text-blue-600 text-2xl mr-3"></i>
                <h1 class="text-xl font-bold text-gray-800">系统权限配置</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors text-sm" onclick="saveConfig()">
                    <i class="fas fa-save mr-1"></i>保存配置
                </button>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-6">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <!-- 工具栏 -->
            <div class="flex justify-between items-center mb-6">
                <div class="flex items-center space-x-4">
                    <button class="px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors text-sm" onclick="openModal('addMenuModal')">
                        <i class="fas fa-plus mr-1.5"></i>新增菜单
                    </button>
                    <button class="px-3 py-1.5 border border-gray-300 rounded text-sm hover:bg-gray-50" onclick="expandAll()">
                        <i class="fas fa-expand-alt mr-1.5"></i>展开全部
                    </button>
                    <button class="px-3 py-1.5 border border-gray-300 rounded text-sm hover:bg-gray-50" onclick="collapseAll()">
                        <i class="fas fa-compress-alt mr-1.5"></i>收起全部
                    </button>
                </div>
                <div class="relative">
                    <input type="text" id="menuSearch" placeholder="搜索菜单..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                </div>
            </div>

            <!-- 权限配置树 -->
            <div class="space-y-2" id="permissionTree">
                <!-- 系统设置菜单 -->
                <div class="menu-item border border-gray-200 rounded-md overflow-hidden" id="system-menu">
                    <div class="flex items-center justify-between bg-gray-50 px-4 py-3">
                        <div class="flex items-center">
                            <i class="fas fa-caret-right tree-toggle open mr-2" onclick="toggleSubMenu('system-submenu')"></i>
                            <i class="fas fa-cog text-gray-600 mr-2"></i>
                            <span class="font-medium">系统设置</span>
                            <span class="ml-2 bg-blue-100 text-blue-800 permission-tag rounded">菜单</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="text-gray-400 hover:text-gray-600 px-2" onclick="openAddSubMenuModal('system-menu')">
                                <i class="fas fa-plus"></i>
                            </button>
                            <button class="text-gray-400 hover:text-gray-600 px-2" onclick="editMenu('system-menu')">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="text-gray-400 hover:text-gray-600 px-2" onclick="deleteMenu('system-menu')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 子菜单和页面 -->
                    <div class="px-4 py-2 border-t border-gray-200" id="system-submenu">
                        <div class="pl-6 space-y-3">
                            <!-- 用户管理页面 -->
                            <div class="menu-item" id="user-page">
                                <div class="flex items-center justify-between py-2">
                                    <div class="flex items-center">
                                        <i class="fas fa-caret-right tree-toggle open mr-2" onclick="toggleSubMenu('user-permissions')"></i>
                                        <i class="fas fa-users text-gray-600 mr-2"></i>
                                        <span class="text-sm font-medium">用户管理</span>
                                        <span class="ml-2 bg-green-100 text-green-800 permission-tag rounded">页面</span>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="openAddPermissionModal('user-page')">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="editPage('user-page')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="deletePage('user-page')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 操作权限和数据权限 -->
                                <div class="pl-6 space-y-2 mt-2" id="user-permissions">
                                    <!-- 操作权限组 -->
                                    <div class="border-l-2 border-gray-200 pl-4">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center">
                                                <i class="fas fa-wrench text-gray-500 mr-2"></i>
                                                <span class="text-sm font-medium">操作权限</span>
                                                <span class="ml-2 bg-yellow-100 text-yellow-800 permission-tag rounded">操作</span>
                                            </div>
                                            <button class="text-blue-600 hover:text-blue-800 text-sm" onclick="openAddOperationModal('user-page')">
                                                <i class="fas fa-plus mr-1"></i>添加操作
                                            </button>
                                        </div>
                                        <div class="space-y-2" id="user-operations">
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">查询用户列表</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('user-query')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('user-query')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">新增用户</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('user-add')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('user-add')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">编辑用户</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('user-edit')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('user-edit')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">删除用户</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('user-delete')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('user-delete')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 数据权限组 -->
                                    <div class="border-l-2 border-gray-200 pl-4 mt-4">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center">
                                                <i class="fas fa-database text-gray-500 mr-2"></i>
                                                <span class="text-sm font-medium">数据权限</span>
                                                <span class="ml-2 bg-purple-100 text-purple-800 permission-tag rounded">数据</span>
                                            </div>
                                            <button class="text-blue-600 hover:text-blue-800 text-sm" onclick="openAddDataPermissionModal('user-page')">
                                                <i class="fas fa-plus mr-1"></i>添加数据权限
                                            </button>
                                        </div>
                                        <div class="space-y-2" id="user-data-permissions">
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">部门数据权限</span>
                                                <div class="flex items-center space-x-2">
                                                    <select class="text-sm border border-gray-300 rounded px-2 py-1" onchange="updateDataPermission('user-dept-data', this.value)">
                                                        <option value="dept">本部门数据</option>
                                                        <option value="deptAndChild">本部门及下级数据</option>
                                                        <option value="all">全部数据</option>
                                                    </select>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteDataPermission('user-dept-data')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">个人数据权限</span>
                                                <div class="flex items-center space-x-2">
                                                    <select class="text-sm border border-gray-300 rounded px-2 py-1" onchange="updateDataPermission('user-self-data', this.value)">
                                                        <option value="self">仅本人数据</option>
                                                        <option value="dept">本部门数据</option>
                                                        <option value="all">全部数据</option>
                                                    </select>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteDataPermission('user-self-data')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 角色管理页面 -->
                            <div class="menu-item" id="role-page">
                                <div class="flex items-center justify-between py-2">
                                    <div class="flex items-center">
                                        <i class="fas fa-caret-right tree-toggle mr-2" onclick="toggleSubMenu('role-permissions')"></i>
                                        <i class="fas fa-user-tag text-gray-600 mr-2"></i>
                                        <span class="text-sm font-medium">角色管理</span>
                                        <span class="ml-2 bg-green-100 text-green-800 permission-tag rounded">页面</span>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="openAddPermissionModal('role-page')">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="editPage('role-page')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="deletePage('role-page')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 角色管理权限 -->
                                <div class="pl-6 space-y-2 mt-2 hidden" id="role-permissions">
                                    <!-- 操作权限组 -->
                                    <div class="border-l-2 border-gray-200 pl-4">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center">
                                                <i class="fas fa-wrench text-gray-500 mr-2"></i>
                                                <span class="text-sm font-medium">操作权限</span>
                                                <span class="ml-2 bg-yellow-100 text-yellow-800 permission-tag rounded">操作</span>
                                            </div>
                                            <button class="text-blue-600 hover:text-blue-800 text-sm" onclick="openAddOperationModal('role-page')">
                                                <i class="fas fa-plus mr-1"></i>添加操作
                                            </button>
                                        </div>
                                        <div class="space-y-2" id="role-operations">
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">查询角色列表</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('role-query')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('role-query')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">新增角色</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('role-add')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('role-add')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">编辑角色</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('role-edit')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('role-edit')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">删除角色</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('role-delete')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('role-delete')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">分配权限</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('role-assign')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('role-assign')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 菜单管理页面 -->
                            <div class="menu-item" id="menu-page">
                                <div class="flex items-center justify-between py-2">
                                    <div class="flex items-center">
                                        <i class="fas fa-caret-right tree-toggle mr-2" onclick="toggleSubMenu('menu-permissions')"></i>
                                        <i class="fas fa-list text-gray-600 mr-2"></i>
                                        <span class="text-sm font-medium">菜单管理</span>
                                        <span class="ml-2 bg-green-100 text-green-800 permission-tag rounded">页面</span>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="openAddPermissionModal('menu-page')">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="editPage('menu-page')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="deletePage('menu-page')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 菜单管理权限 -->
                                <div class="pl-6 space-y-2 mt-2 hidden" id="menu-permissions">
                                    <!-- 操作权限组 -->
                                    <div class="border-l-2 border-gray-200 pl-4">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center">
                                                <i class="fas fa-wrench text-gray-500 mr-2"></i>
                                                <span class="text-sm font-medium">操作权限</span>
                                                <span class="ml-2 bg-yellow-100 text-yellow-800 permission-tag rounded">操作</span>
                                            </div>
                                            <button class="text-blue-600 hover:text-blue-800 text-sm" onclick="openAddOperationModal('menu-page')">
                                                <i class="fas fa-plus mr-1"></i>添加操作
                                            </button>
                                        </div>
                                        <div class="space-y-2" id="menu-operations">
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">查询菜单列表</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('menu-query')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('menu-query')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">新增菜单</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('menu-add')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('menu-add')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">编辑菜单</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('menu-edit')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('menu-edit')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">删除菜单</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('menu-delete')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('menu-delete')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 酒店管理菜单 -->
                <div class="menu-item border border-gray-200 rounded-md overflow-hidden" id="hotel-menu">
                    <div class="flex items-center justify-between bg-gray-50 px-4 py-3">
                        <div class="flex items-center">
                            <i class="fas fa-caret-right tree-toggle mr-2" onclick="toggleSubMenu('hotel-submenu')"></i>
                            <i class="fas fa-hotel text-gray-600 mr-2"></i>
                            <span class="font-medium">酒店管理</span>
                            <span class="ml-2 bg-blue-100 text-blue-800 permission-tag rounded">菜单</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="text-gray-400 hover:text-gray-600 px-2" onclick="openAddSubMenuModal('hotel-menu')">
                                <i class="fas fa-plus"></i>
                            </button>
                            <button class="text-gray-400 hover:text-gray-600 px-2" onclick="editMenu('hotel-menu')">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="text-gray-400 hover:text-gray-600 px-2" onclick="deleteMenu('hotel-menu')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 子菜单和页面 -->
                    <div class="px-4 py-2 border-t border-gray-200 hidden" id="hotel-submenu">
                        <div class="pl-6 space-y-3">
                            <!-- 酒店信息页面 -->
                            <div class="menu-item" id="hotel-info-page">
                                <div class="flex items-center justify-between py-2">
                                    <div class="flex items-center">
                                        <i class="fas fa-caret-right tree-toggle mr-2" onclick="toggleSubMenu('hotel-info-permissions')"></i>
                                        <i class="fas fa-info-circle text-gray-600 mr-2"></i>
                                        <span class="text-sm font-medium">酒店信息</span>
                                        <span class="ml-2 bg-green-100 text-green-800 permission-tag rounded">页面</span>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="openAddPermissionModal('hotel-info-page')">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="editPage('hotel-info-page')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="deletePage('hotel-info-page')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 酒店信息权限 -->
                                <div class="pl-6 space-y-2 mt-2 hidden" id="hotel-info-permissions">
                                    <!-- 操作权限组 -->
                                    <div class="border-l-2 border-gray-200 pl-4">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center">
                                                <i class="fas fa-wrench text-gray-500 mr-2"></i>
                                                <span class="text-sm font-medium">操作权限</span>
                                                <span class="ml-2 bg-yellow-100 text-yellow-800 permission-tag rounded">操作</span>
                                            </div>
                                            <button class="text-blue-600 hover:text-blue-800 text-sm" onclick="openAddOperationModal('hotel-info-page')">
                                                <i class="fas fa-plus mr-1"></i>添加操作
                                            </button>
                                        </div>
                                        <div class="space-y-2" id="hotel-info-operations">
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">查询酒店信息</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('hotel-info-query')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('hotel-info-query')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">编辑酒店信息</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('hotel-info-edit')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('hotel-info-edit')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 数据权限组 -->
                                    <div class="border-l-2 border-gray-200 pl-4 mt-4">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center">
                                                <i class="fas fa-database text-gray-500 mr-2"></i>
                                                <span class="text-sm font-medium">数据权限</span>
                                                <span class="ml-2 bg-purple-100 text-purple-800 permission-tag rounded">数据</span>
                                            </div>
                                            <button class="text-blue-600 hover:text-blue-800 text-sm" onclick="openAddDataPermissionModal('hotel-info-page')">
                                                <i class="fas fa-plus mr-1"></i>添加数据权限
                                            </button>
                                        </div>
                                        <div class="space-y-2" id="hotel-info-data-permissions">
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">酒店数据权限</span>
                                                <div class="flex items-center space-x-2">
                                                    <select class="text-sm border border-gray-300 rounded px-2 py-1" onchange="updateDataPermission('hotel-data', this.value)">
                                                        <option value="assigned">已分配酒店</option>
                                                        <option value="all">全部酒店</option>
                                                    </select>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteDataPermission('hotel-data')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 房型管理页面 -->
                            <div class="menu-item" id="room-type-page">
                                <div class="flex items-center justify-between py-2">
                                    <div class="flex items-center">
                                        <i class="fas fa-caret-right tree-toggle mr-2" onclick="toggleSubMenu('room-type-permissions')"></i>
                                        <i class="fas fa-bed text-gray-600 mr-2"></i>
                                        <span class="text-sm font-medium">房型管理</span>
                                        <span class="ml-2 bg-green-100 text-green-800 permission-tag rounded">页面</span>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="openAddPermissionModal('room-type-page')">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="editPage('room-type-page')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-gray-600 px-2" onclick="deletePage('room-type-page')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 房型管理权限 -->
                                <div class="pl-6 space-y-2 mt-2 hidden" id="room-type-permissions">
                                    <!-- 操作权限组 -->
                                    <div class="border-l-2 border-gray-200 pl-4">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center">
                                                <i class="fas fa-wrench text-gray-500 mr-2"></i>
                                                <span class="text-sm font-medium">操作权限</span>
                                                <span class="ml-2 bg-yellow-100 text-yellow-800 permission-tag rounded">操作</span>
                                            </div>
                                            <button class="text-blue-600 hover:text-blue-800 text-sm" onclick="openAddOperationModal('room-type-page')">
                                                <i class="fas fa-plus mr-1"></i>添加操作
                                            </button>
                                        </div>
                                        <div class="space-y-2" id="room-type-operations">
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">查询房型列表</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('room-type-query')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('room-type-query')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">新增房型</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('room-type-add')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('room-type-add')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">编辑房型</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('room-type-edit')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('room-type-edit')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
                                                <span class="text-sm text-gray-600">删除房型</span>
                                                <div class="flex items-center space-x-2">
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="editOperation('room-type-delete')">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="text-gray-400 hover:text-gray-600" onclick="deleteOperation('room-type-delete')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 模态框 - 添加菜单 -->
    <div id="addMenuModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-md">
            <div class="flex justify-between items-center px-6 py-4 border-b">
                <h3 class="text-lg font-medium">添加菜单</h3>
                <button class="text-gray-400 hover:text-gray-600" onclick="closeModal('addMenuModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="px-6 py-4">
                <form id="addMenuForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">菜单名称</label>
                        <input type="text" id="menuName" class="w-full px-3 py-2 border border-gray-300 rounded-md" required>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">菜单图标</label>
                        <div class="flex">
                            <div class="w-10 h-10 border border-gray-300 rounded-l-md flex items-center justify-center bg-gray-50">
                                <i id="selectedIcon" class="fas fa-list"></i>
                            </div>
                            <select id="menuIcon" class="flex-1 px-3 py-2 border border-gray-300 rounded-r-md" onchange="updateIconPreview()">
                                <option value="fa-list">列表</option>
                                <option value="fa-home">首页</option>
                                <option value="fa-cog">设置</option>
                                <option value="fa-users">用户</option>
                                <option value="fa-user-tag">角色</option>
                                <option value="fa-hotel">酒店</option>
                                <option value="fa-bed">房间</option>
                                <option value="fa-calendar-alt">日历</option>
                                <option value="fa-chart-bar">图表</option>
                                <option value="fa-file">文件</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">菜单路径</label>
                        <input type="text" id="menuPath" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">排序</label>
                        <input type="number" id="menuOrder" class="w-full px-3 py-2 border border-gray-300 rounded-md" value="1">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <div class="flex space-x-4">
                            <label class="inline-flex items-center">
                                <input type="radio" name="menuStatus" value="1" class="form-radio" checked>
                                <span class="ml-2">启用</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="menuStatus" value="0" class="form-radio">
                                <span class="ml-2">禁用</span>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="px-6 py-3 bg-gray-50 flex justify-end rounded-b-lg">
                <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded mr-2 hover:bg-gray-300" onclick="closeModal('addMenuModal')">取消</button>
                <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700" onclick="addNewMenu()">确定</button>
            </div>
        </div>
    </div>
    
        <!-- 模态框 - 添加操作权限 -->
        <div id="addOperationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-full max-w-md">
                <div class="flex justify-between items-center px-6 py-4 border-b">
                    <h3 class="text-lg font-medium">添加操作权限</h3>
                    <button class="text-gray-400 hover:text-gray-600" onclick="closeModal('addOperationModal')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="px-6 py-4">
                    <form id="addOperationForm">
                        <input type="hidden" id="operationPageId">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">操作名称</label>
                            <input type="text" id="operationName" class="w-full px-3 py-2 border border-gray-300 rounded-md" required>
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">操作编码</label>
                            <input type="text" id="operationCode" class="w-full px-3 py-2 border border-gray-300 rounded-md" required>
                            <p class="text-xs text-gray-500 mt-1">例如：user:add, user:edit</p>
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">操作描述</label>
                            <textarea id="operationDesc" class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="2"></textarea>
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <div class="flex space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="operationStatus" value="1" class="form-radio" checked>
                                    <span class="ml-2">启用</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="operationStatus" value="0" class="form-radio">
                                    <span class="ml-2">禁用</span>
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="px-6 py-3 bg-gray-50 flex justify-end rounded-b-lg">
                    <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded mr-2 hover:bg-gray-300" onclick="closeModal('addOperationModal')">取消</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700" onclick="addNewOperation()">确定</button>
                </div>
            </div>
        </div>
        
        <!-- 模态框 - 添加数据权限 -->
        <div id="addDataPermissionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-full max-w-md">
                <div class="flex justify-between items-center px-6 py-4 border-b">
                    <h3 class="text-lg font-medium">添加数据权限</h3>
                    <button class="text-gray-400 hover:text-gray-600" onclick="closeModal('addDataPermissionModal')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="px-6 py-4">
                    <form id="addDataPermissionForm">
                        <input type="hidden" id="dataPermissionPageId">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限名称</label>
                            <input type="text" id="dataPermissionName" class="w-full px-3 py-2 border border-gray-300 rounded-md" required>
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限类型</label>
                            <select id="dataPermissionType" class="w-full px-3 py-2 border border-gray-300 rounded-md" onchange="toggleDataPermissionFields()">
                                <option value="dept">部门数据权限</option>
                                <option value="user">用户数据权限</option>
                                <option value="hotel">酒店数据权限</option>
                                <option value="custom">自定义数据权限</option>
                            </select>
                        </div>
                        
                        <!-- 部门数据权限选项 -->
                        <div id="deptPermissionOptions" class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限范围</label>
                            <select id="deptScope" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                                <option value="self">仅本部门数据</option>
                                <option value="deptAndChild">本部门及下级部门数据</option>
                                <option value="all">全部部门数据</option>
                                <option value="custom">自定义部门数据</option>
                            </select>
                        </div>
                        
                        <!-- 用户数据权限选项 -->
                        <div id="userPermissionOptions" class="mb-4 hidden">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限范围</label>
                            <select id="userScope" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                                <option value="self">仅本人数据</option>
                                <option value="dept">本部门用户数据</option>
                                <option value="all">全部用户数据</option>
                            </select>
                        </div>
                        
                        <!-- 酒店数据权限选项 -->
                        <div id="hotelPermissionOptions" class="mb-4 hidden">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限范围</label>
                            <select id="hotelScope" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                                <option value="assigned">已分配酒店</option>
                                <option value="all">全部酒店</option>
                            </select>
                        </div>
                        
                        <!-- 自定义数据权限选项 -->
                        <div id="customPermissionOptions" class="mb-4 hidden">
                            <label class="block text-sm font-medium text-gray-700 mb-1">SQL表达式</label>
                            <textarea id="customSql" class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="3" placeholder="例如: hotel_id in (select hotel_id from user_hotel where user_id = #{user.id})"></textarea>
                            <p class="text-xs text-gray-500 mt-1">可使用 #{user.id}, #{user.deptId} 等变量</p>
                        </div>
                        
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限描述</label>
                            <textarea id="dataPermissionDesc" class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="2"></textarea>
                        </div>
                    </form>
                </div>
                <div class="px-6 py-3 bg-gray-50 flex justify-end rounded-b-lg">
                    <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded mr-2 hover:bg-gray-300" onclick="closeModal('addDataPermissionModal')">取消</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700" onclick="addNewDataPermission()">确定</button>
                </div>
            </div>
        </div>
        
        <!-- 模态框 - 编辑页面 -->
        <div id="editPageModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-full max-w-md">
                <div class="flex justify-between items-center px-6 py-4 border-b">
                    <h3 class="text-lg font-medium">编辑页面</h3>
                    <button class="text-gray-400 hover:text-gray-600" onclick="closeModal('editPageModal')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="px-6 py-4">
                    <form id="editPageForm">
                        <input type="hidden" id="editPageId">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">页面名称</label>
                            <input type="text" id="editPageName" class="w-full px-3 py-2 border border-gray-300 rounded-md" required>
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">页面图标</label>
                            <div class="flex">
                                <div class="w-10 h-10 border border-gray-300 rounded-l-md flex items-center justify-center bg-gray-50">
                                    <i id="editSelectedPageIcon" class="fas fa-list"></i>
                                </div>
                                <select id="editPageIcon" class="flex-1 px-3 py-2 border border-gray-300 rounded-r-md" onchange="updateEditPageIconPreview()">
                                    <option value="fa-list">列表</option>
                                    <option value="fa-home">首页</option>
                                    <option value="fa-cog">设置</option>
                                    <option value="fa-users">用户</option>
                                    <option value="fa-user-tag">角色</option>
                                    <option value="fa-hotel">酒店</option>
                                    <option value="fa-bed">房间</option>
                                    <option value="fa-info-circle">信息</option>
                                    <option value="fa-calendar-alt">日历</option>
                                    <option value="fa-chart-bar">图表</option>
                                    <option value="fa-file">文件</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">页面路径</label>
                            <input type="text" id="editPagePath" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">排序</label>
                            <input type="number" id="editPageOrder" class="w-full px-3 py-2 border border-gray-300 rounded-md" value="1">
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <div class="flex space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="editPageStatus" value="1" class="form-radio" checked>
                                    <span class="ml-2">启用</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="editPageStatus" value="0" class="form-radio">
                                    <span class="ml-2">禁用</span>
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="px-6 py-3 bg-gray-50 flex justify-end rounded-b-lg">
                    <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded mr-2 hover:bg-gray-300" onclick="closeModal('editPageModal')">取消</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700" onclick="savePageEdit()">保存</button>
                </div>
            </div>
        </div>
        
        <!-- JavaScript 代码 -->
        <script>
            // 切换子菜单显示/隐藏
            function toggleSubMenu(id) {
                const subMenu = document.getElementById(id);
                const icon = event.target;
                
                if (subMenu.classList.contains('hidden')) {
                    subMenu.classList.remove('hidden');
                    icon.classList.remove('fa-caret-right');
                    icon.classList.add('fa-caret-down');
                } else {
                    subMenu.classList.add('hidden');
                    icon.classList.remove('fa-caret-down');
                    icon.classList.add('fa-caret-right');
                }
            }
            
            // 打开模态框
            function openModal(id) {
                document.getElementById(id).classList.remove('hidden');
            }
            
            // 关闭模态框
            function closeModal(id) {
                document.getElementById(id).classList.add('hidden');
            }
            
            // 打开添加菜单模态框
            function openAddMenuModal() {
                document.getElementById('addMenuForm').reset();
                openModal('addMenuModal');
            }
            
            // 打开添加子菜单模态框
            function openAddSubMenuModal(parentId) {
                document.getElementById('addMenuForm').reset();
                // 可以在这里设置父菜单ID
                openModal('addMenuModal');
            }
            
            // 打开添加操作权限模态框
            function openAddOperationModal(pageId) {
                document.getElementById('addOperationForm').reset();
                document.getElementById('operationPageId').value = pageId;
                openModal('addOperationModal');
            }
            
                        // 打开添加数据权限模态框
                        function openAddDataPermissionModal(pageId) {
                document.getElementById('addDataPermissionForm').reset();
                document.getElementById('dataPermissionPageId').value = pageId;
                toggleDataPermissionFields();
                openModal('addDataPermissionModal');
            }
            
            // 切换数据权限字段显示
            function toggleDataPermissionFields() {
                const permissionType = document.getElementById('dataPermissionType').value;
                
                // 隐藏所有选项
                document.getElementById('deptPermissionOptions').classList.add('hidden');
                document.getElementById('userPermissionOptions').classList.add('hidden');
                document.getElementById('hotelPermissionOptions').classList.add('hidden');
                document.getElementById('customPermissionOptions').classList.add('hidden');
                
                // 根据选择的类型显示对应选项
                if (permissionType === 'dept') {
                    document.getElementById('deptPermissionOptions').classList.remove('hidden');
                } else if (permissionType === 'user') {
                    document.getElementById('userPermissionOptions').classList.remove('hidden');
                } else if (permissionType === 'hotel') {
                    document.getElementById('hotelPermissionOptions').classList.remove('hidden');
                } else if (permissionType === 'custom') {
                    document.getElementById('customPermissionOptions').classList.remove('hidden');
                }
            }
            
            // 打开编辑页面模态框
            function editPage(pageId) {
                // 这里可以通过AJAX获取页面信息
                // 示例数据
                const pageData = {
                    id: pageId,
                    name: document.querySelector(`#${pageId} .text-sm.font-medium`).textContent,
                    icon: 'fa-list', // 假设从后端获取
                    path: '/pages/' + pageId,
                    order: 1,
                    status: 1
                };
                
                // 填充表单
                document.getElementById('editPageId').value = pageData.id;
                document.getElementById('editPageName').value = pageData.name;
                document.getElementById('editPageIcon').value = pageData.icon;
                document.getElementById('editPagePath').value = pageData.path;
                document.getElementById('editPageOrder').value = pageData.order;
                document.querySelector(`input[name="editPageStatus"][value="${pageData.status}"]`).checked = true;
                
                // 更新图标预览
                updateEditPageIconPreview();
                
                // 打开模态框
                openModal('editPageModal');
            }
            
            // 更新图标预览
            function updateIconPreview() {
                const iconClass = document.getElementById('menuIcon').value;
                document.getElementById('selectedIcon').className = `fas ${iconClass}`;
            }
            
            // 更新编辑页面图标预览
            function updateEditPageIconPreview() {
                const iconClass = document.getElementById('editPageIcon').value;
                document.getElementById('editSelectedPageIcon').className = `fas ${iconClass}`;
            }
            
            // 添加新菜单
            function addNewMenu() {
                const menuName = document.getElementById('menuName').value;
                if (!menuName) {
                    alert('请输入菜单名称');
                    return;
                }
                
                // 这里可以通过AJAX提交数据到后端
                // 示例：模拟添加成功
                alert('菜单添加成功');
                closeModal('addMenuModal');
                
                // 刷新页面或更新DOM
                // location.reload();
            }
            
            // 添加新操作权限
            function addNewOperation() {
                const operationName = document.getElementById('operationName').value;
                const operationCode = document.getElementById('operationCode').value;
                
                if (!operationName || !operationCode) {
                    alert('请填写操作名称和操作编码');
                    return;
                }
                
                // 这里可以通过AJAX提交数据到后端
                // 示例：模拟添加成功
                alert('操作权限添加成功');
                closeModal('addOperationModal');
                
                // 刷新页面或更新DOM
                // location.reload();
            }
            
            // 添加新数据权限
            function addNewDataPermission() {
                const permissionName = document.getElementById('dataPermissionName').value;
                
                if (!permissionName) {
                    alert('请填写权限名称');
                    return;
                }
                
                // 这里可以通过AJAX提交数据到后端
                // 示例：模拟添加成功
                alert('数据权限添加成功');
                closeModal('addDataPermissionModal');
                
                // 刷新页面或更新DOM
                // location.reload();
            }
            
            // 保存页面编辑
            function savePageEdit() {
                const pageName = document.getElementById('editPageName').value;
                
                if (!pageName) {
                    alert('请填写页面名称');
                    return;
                }
                
                // 这里可以通过AJAX提交数据到后端
                // 示例：模拟保存成功
                alert('页面信息保存成功');
                closeModal('editPageModal');
                
                // 刷新页面或更新DOM
                // location.reload();
            }
            
            // 删除页面
            function deletePage(pageId) {
                if (confirm('确定要删除该页面吗？')) {
                    // 这里可以通过AJAX提交删除请求到后端
                    // 示例：模拟删除成功
                    alert('页面删除成功');
                    
                    // 刷新页面或更新DOM
                    // location.reload();
                }
            }
            
            // 删除菜单
            function deleteMenu(menuId) {
                if (confirm('确定要删除该菜单吗？删除后将同时删除其下所有子菜单和页面。')) {
                    // 这里可以通过AJAX提交删除请求到后端
                    // 示例：模拟删除成功
                    alert('菜单删除成功');
                    
                    // 刷新页面或更新DOM
                    // location.reload();
                }
            }
            
            // 编辑操作权限
            function editOperation(operationId) {
                // 这里可以通过AJAX获取操作权限信息并打开编辑模态框
                alert('编辑操作权限: ' + operationId);
            }
            
            // 删除操作权限
            function deleteOperation(operationId) {
                if (confirm('确定要删除该操作权限吗？')) {
                    // 这里可以通过AJAX提交删除请求到后端
                    // 示例：模拟删除成功
                    alert('操作权限删除成功');
                    
                    // 刷新页面或更新DOM
                    // location.reload();
                }
            }
            
            // 更新数据权限
            function updateDataPermission(permissionId, value) {
                // 这里可以通过AJAX提交更新请求到后端
                console.log('更新数据权限: ' + permissionId + ', 值: ' + value);
            }
            
            // 删除数据权限
            function deleteDataPermission(permissionId) {
                if (confirm('确定要删除该数据权限吗？')) {
                    // 这里可以通过AJAX提交删除请求到后端
                    // 示例：模拟删除成功
                    alert('数据权限删除成功');
                    
                    // 刷新页面或更新DOM
                    // location.reload();
                }
            }
            
            // 打开添加权限模态框
            function openAddPermissionModal(pageId) {
                // 可以根据需要打开不同的权限添加模态框
                alert('为页面添加权限: ' + pageId);
            }
            
            // 编辑菜单
            function editMenu(menuId) {
                // 这里可以通过AJAX获取菜单信息并打开编辑模态框
                alert('编辑菜单: ' + menuId);
            }
            
            // 页面加载完成后初始化
            document.addEventListener('DOMContentLoaded', function() {
                // 初始化图标预览
                updateIconPreview();
                
                // 初始化数据权限字段
                toggleDataPermissionFields();
            });
        </script>
    </body>
</html>